<template>
  <div id="dutyTableContainer">
    <el-row type="flex" style="padding-left: 20px" justify="space-between">
      <el-col :span="16">
        <h2 class="subtitle" style="margin-top: 10px; margin-left: 5px">
          <el-button type="text" @click="goback"><i class="el-icon-back subtitle"></i></el-button>
          {{year}}年{{month}}月值班表
        </h2>
      </el-col>
      <el-col :span="2">
        <div style="padding: 10px 0px 15px 0px">
          <el-button class="el-blue-button" @click="downloadDutyTable"><i class="el-icon-document"></i>&nbsp;导出</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex"  justify="space-around">
      <el-col :span="24" >
        <el-col :span="19">
          <h2 style="text-align: center; margin-top: 5px;">集控中心两个值班人员管理</h2>
        </el-col>
        <el-col :span="4">
          <el-button v-if="this.isEditable" @click="enableEdit" class="el-blue-button" size="small" style="float: right;margin-right: 8px"><i class="el-icon-document"></i>修改</el-button>
          <el-button @click="openDialog('add')" v-if="this.isEditable&&this.edit" class="el-blue-button" size="small" style="float: right;margin-right: 8px"><i class="el-icon-plus"></i>新增</el-button>
        </el-col>
        <div id="dutyTable" style="overflow-x:scroll; overflow-y: scroll ;width: 90vw;">
          <el-table
            ref="myTable"
            :span-method="objectSpanMethod"
            :data="dutyTable"
            class="tb-edit"
            :highlight-current-row="this.edit"
            style="overflow-y: hidden;overflow-x:hidden;">
            <el-table-column prop="crew_type" label="班组类别" width="150px" align="center"></el-table-column>
            <el-table-column prop="position" label="职位 " width="150px" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100px"  align="center"></el-table-column>
            <el-table-column prop="crew_sub_type" label="值内小值" width="100px" align="center"></el-table-column>
            <el-table-column prop="duty_type" label="倒班情况" width="100px" align="center"> </el-table-column>
            <el-table-column v-if="daysOfMonth===31" :label=this.label width="600px">
              <el-table-column  :label="getWeekByDate((i+1).toString())" align="center" width="70px" v-for="(item,i) in days31" :key="i+1">
                <el-table-column :prop="item.toString()" :label="(i+1).toString()" align="center" width="70px">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row[item]" placeholder=""></el-input>
                    <span>{{scope.row[item]}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
<!--              <el-table-column :prop="item.toString()" :label="(i+1).toString()" width="70px" v-for="(item,i) in days31" :key="i+1">-->
<!--&lt;!&ndash;                <el-table-column :label="getWeekByDate((i+1).toString())" align="center"></el-table-column>&ndash;&gt;-->
<!--                <template slot-scope="scope">-->
<!--                  <el-input size="small" v-model="scope.row[item]" placeholder=""></el-input>-->
<!--                  &lt;!&ndash;                <el-select v-if="edit" v-model="scope.row[item]" placeholder="请输入内容">&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <el-option label="上" value="上"></el-option>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <el-option label="白" value="白"></el-option>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <el-option label="夜" value="夜"></el-option>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <el-option label="" value=""></el-option>&ndash;&gt;-->
<!--                  &lt;!&ndash;                </el-select>&ndash;&gt;-->
<!--                  <span>{{scope.row[item]}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table-column>
            <el-table-column v-if="daysOfMonth===30" :label=this.label width="600px">
              <el-table-column  :label="getWeekByDate((i+1).toString())" align="center" width="70px" v-for="(item,i) in days30" :key="i+1">
                <el-table-column :prop="item.toString()" :label="(i+1).toString()" align="center" width="70px">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row[item]" placeholder=""></el-input>
                    <span>{{scope.row[item]}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column v-if="daysOfMonth===29" :label=this.label width="600px">
              <el-table-column  :label="getWeekByDate((i+1).toString())" align="center" width="70px" v-for="(item,i) in days29" :key="i+1">
                <el-table-column :prop="item.toString()" :label="(i+1).toString()" align="center" width="70px">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row[item]" placeholder=""></el-input>
                    <span>{{scope.row[item]}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column v-if="daysOfMonth===28" :label=this.label width="600px">
              <el-table-column  :label="getWeekByDate((i+1).toString())" align="center" width="70px" v-for="(item,i) in days28" :key="i+1">
                <el-table-column :prop="item.toString()" :label="(i+1).toString()" align="center" width="70px">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row[item]" placeholder=""></el-input>
                    <span>{{scope.row[item]}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column v-if="this.isEditable&&this.edit" label="操作" width="160px" style="height: auto"  align="center">
              <template slot-scope="scope">
                <el-button class="el-blue-button" size="mini" style="height: 30px" @click="setCurrent(scope.row)">保存</el-button>
                <el-button class="el-red-button" size="mini" style="height: 30px" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-col>
    </el-row>
    <add-dialog
      :visibleFlag.sync="dialogData.visibleFlag"
      @handleSubmit="addNewPerson"
      width="40%"
      :title="dialogData.dialogTitle"
    >
      <el-form ref="FormDate" :model="newDutyPerson"  label-width="130px" slot="dialog-section">
        <el-form-item
          prop="crew_type"
          label="班组类别："
          :rules="[{required: true, message: '请选择班组类别', trigger: 'blur'}]">
          <el-select v-model=" newDutyPerson.crew_type" placeholder="请选择班组类别">
            <el-option label="集控一值" value="集控一值"></el-option>
            <el-option label="集控二值" value="集控二值"></el-option>
            <el-option label="集控三值" value="集控三值"></el-option>
            <el-option label="无" value="无"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="name"
          label="姓名："
          :rules="[{required: true, message: '请选择姓名', trigger: 'blur'}]">
<!--          <el-input v-model="newDutyPerson.name"></el-input>-->
          <el-select v-model=" newDutyPerson.personid" placeholder="请选择姓名">
            <el-option :label="person.name" :value="person.id" v-for="person in notInTablePersonList" :key="person.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="position"
          label="职位："
          :rules="[{required: true, message: '请选择职位', trigger: 'blur'}]">
          <el-select v-model=" newDutyPerson.position" placeholder="请选择职位">
            <el-option label="集控中心经理" value="集控中心经理"></el-option>
            <el-option label="总值长" value="总值长"></el-option>
            <el-option label="值长" value="值长"></el-option>
            <el-option label="主值" value="主值"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="crew_sub_type"
          label="值内小值："
          :rules="[{required: true, message: '请选择值内小值', trigger: 'blur'}]">
          <el-select v-model=" newDutyPerson.crew_sub_type" placeholder="请选择值内小值">
            <el-option label="甲值" value="甲值"></el-option>
            <el-option label="乙值" value="乙值"></el-option>
            <el-option label="丙值" value="丙值"></el-option>
            <el-option label="丁值" value="丁值"></el-option>
            <el-option label="无" value="无"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="duty_type"
          label="倒班情况："
          :rules="[{required: true, message: '请选择倒班情况', trigger: 'blur'}]">
          <el-select v-model=" newDutyPerson.duty_type" placeholder="请选择倒班情况">
            <el-option label="行政班" value="行政班"></el-option>
            <el-option label="常白班" value="常白班"></el-option>
            <el-option label="倒班" value="倒班"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </add-dialog>
  </div>
</template>

<script>
import { baseURL } from '@/config/baseConfig'
import request from '@/network/request'
import addDialog from '@/views/bulletinBoard/components/addDialog'
export default {
  name: 'showDuty',
  components: {
    addDialog
  },
  data () {
    return {
      daysOfMonth: 31, // 当前月的天数
      year: '', // 表格的年
      month: '', // 表格的月
      belong_to_id: '', // 表格的id
      isEditable: false,
      edit: false, // 点击修改按钮显示或隐藏删除按钮编辑功能
      label: '',
      notInTablePersonList: [],
      newDutyPerson: {
        belong_to: '',
        crew_type: '集控一值',
        position: '集控中心经理',
        name: '',
        personid: '',
        crew_sub_type: '甲值',
        duty_type: '倒班'
      },
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      },
      spanArr0: [],
      spanArr1: [],
      spanArr2: [],
      days28: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28'],
      days29: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29'],
      days30: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29', 'd30'],
      days31: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29', 'd30', 'd31'],
      dutyTable: [],
      // needMergeArr: ['crew_type', 'crew_sub_type', 'duty_type'], // 有合并项的列
      // rowMergeArrs: {} // 包含需要一个或多个合并项信息的对象
      params: {
        filename: '',
        id: 20

      }
    }
  },
  inject: ['reload'],
  created () {
    // console.log(this.$route.query)
    this.year = parseInt(this.$route.query.year)
    this.month = parseInt(this.$route.query.month)
    this.label = '集控中心' + this.month + '月倒班表'
    this.belong_to_id = parseInt(this.$route.query.id)
    this.newDutyPerson.belong_to = this.belong_to_id
    // console.log(this.year)
    // console.log(this.month)
    // console.log(this.belong_to_id)
    // console.log(new Date().getFullYear())
    // console.log(new Date().getMonth() + 1)
    this.daysOfMonth = this.getDaysOfMonth(this.year, this.month)
    this.isEditable = this.isAdaptable()
    this.getDutyTable(this.belong_to_id)
    // this.getWeek(this.year, this.month)
  },
  mounted () {
    const deviceHeight = Number(document.documentElement.clientHeight)
    console.log(deviceHeight)
    const dutyTableContainer = document.getElementById('dutyTable')
    dutyTableContainer.style.height = (deviceHeight - 300) / deviceHeight * 100 + 'vh' // 数字是页面布局高度差
  },
  methods: {
    goback: function () {
      console.log('huitui')
      this.$router.back(-1)
    },
    isAdaptable: function () { // 是否可修改
      if (this.year < new Date().getFullYear().toString()) {
        return false
      } else if (this.year === new Date().getFullYear() && this.month < new Date().getMonth() + 1) {
        return false
      } else { return true }
    },
    getDaysOfMonth (year, month) {
      switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          return 31
        case 4:
        case 6:
        case 9:
        case 11:
          return 30
        case 2:
          return ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) ? 29 : 28
        default:
          return 0
      }
    },
    enableEdit: function () {
      this.edit = !this.edit
    },
    getSpanArr (data) {
      // var begin = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr0.push(1)
          this.pos = 0
        } else {
          if (data[i].crew_type === data[i - 1].crew_type) { // 判断当前元素与上一个元素是否相同
            this.spanArr0[this.pos] += 1
            this.spanArr0.push(0)
          } else { // 发现下一行元素不等了
            this.spanArr0.push(1)
            // 同时合并两列
            for (var j = this.pos; j < this.pos + this.spanArr0[this.pos]; j++) {
              if (j === this.pos) {
                this.spanArr1.push(1)
                this.spanArr2.push(1)
                this.subpos1 = this.pos
                this.subpos2 = this.pos
              } else {
                if (data[j].crew_sub_type === data[j - 1].crew_sub_type) {
                  this.spanArr1[this.subpos1] += 1
                  this.spanArr1.push(0)
                } else {
                  this.spanArr1.push(1)
                  this.subpos1 = j
                }
                if (data[j].duty_type === data[j - 1].duty_type) {
                  this.spanArr2[this.subpos2] += 1
                  this.spanArr2.push(0)
                } else {
                  this.spanArr2.push(1)
                  this.subpos2 = j
                }
              }
            }
            this.pos = i
          }
        }
      }
      for (var k = this.pos; k < this.pos + this.spanArr0[this.pos]; k++) {
        if (k === this.pos) {
          this.spanArr1.push(1)
          this.spanArr2.push(1)
          this.subpos1 = this.pos
          this.subpos2 = this.pos
        } else {
          if (data[k].crew_sub_type === data[k - 1].crew_sub_type) {
            this.spanArr1[this.subpos1] += 1
            this.spanArr1.push(0)
          } else {
            this.spanArr1.push(1)
            this.subpos1 = k
          }
          if (data[k].duty_type === data[k - 1].duty_type) {
            this.spanArr2[this.subpos2] += 1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.subpos2 = k
          }
        }
      }
      // console.log(this.spanArr0)
      // console.log('arr1')
      // console.log(this.spanArr1)
      //
      // console.log('arr2')
      // console.log(this.spanArr2)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr0[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) {
        const _row = this.spanArr2[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },
    openDialog (formType, editData = {}) {
      request({
        method: 'post',
        url: '/crew/shownamalist',
        params: {
          belong_to: this.belong_to_id
        }
      }).then(res => {
        // console.log(res.data.data)
        this.notInTablePersonList = res.data.data
      }).catch((error) => {
        console.log(error)// 异常
      })
      this.dialogData = {
        visibleFlag: true,
        formType,
        editData,
        dialogTitle: formType === 'add' ? '新增' : '编辑'
      }
      // console.log(this.notInTablePersonList)
    },
    getDutyTable (id) {
      request({
        method: 'post',
        url: 'duty/showduty',
        params: {
          belong_to: id
        }
      }).then(res => {
        console.log(res.data.data)
        this.dutyTable = res.data.data
        // console.log(this.dutyTable)
        this.getSpanArr(this.dutyTable)
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    getWeekByDate (date) {
      var weekDay = ['日', '一', '二', '三', '四', '五', '六']
      var myDate = new Date(Date.parse(this.year + '/' + this.month + '/' + date))
      // console.log(weekDay[myDate.getDay()])
      return weekDay[myDate.getDay()]
    },
    addNewPerson () {
      this.newDutyPerson.name = this.notInTablePersonList.filter(item => item.id === this.newDutyPerson.personid)[0].name// 从notInTablePersonList里获取newDutyPerson.personid对应的人名
      // console.log('新增的人')
      // console.log(this.newDutyPerson)
      request({
        method: 'post',
        url: 'duty/addduty',
        params: {
          belong_to: this.newDutyPerson.belong_to,
          crew_type: this.newDutyPerson.crew_type,
          position: this.newDutyPerson.position,
          name: this.newDutyPerson.name,
          personid: this.newDutyPerson.personid,
          crew_sub_type: this.newDutyPerson.crew_sub_type,
          duty_type: this.newDutyPerson.duty_type,
          randomID: this.$store.state.user.userId
        }
      }).then(res => {
        // console.log(res)
        this.reload()
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    setCurrent (row) {
      // console.log(row)
      // console.log(row.d1.replace(/\s+/g, '').substr(0, 1).length)
      // console.log(row.d1)
      // console.log(row.d1.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d1.replace(/\s+/g, '').substr(0, 1))
      // console.log((row.d1.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d1.replace(/\s+/g, '').substr(0, 1).length))
      request({
        method: 'post',
        url: '/duty/updateduty',
        params: {
          randomID: this.$store.state.user.userId,
          subid: row.subid,
          d1: row.d1.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d1.replace(/\s+/g, '').substr(0, 1),
          d2: row.d2.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d2.replace(/\s+/g, '').substr(0, 1),
          d3: row.d3.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d3.replace(/\s+/g, '').substr(0, 1),
          d4: row.d4.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d4.replace(/\s+/g, '').substr(0, 1),
          d5: row.d5.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d5.replace(/\s+/g, '').substr(0, 1),
          d6: row.d6.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d6.replace(/\s+/g, '').substr(0, 1),
          d7: row.d7.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d7.replace(/\s+/g, '').substr(0, 1),
          d8: row.d8.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d8.replace(/\s+/g, '').substr(0, 1),
          d9: row.d9.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d9.replace(/\s+/g, '').substr(0, 1),
          d10: row.d10.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d10.replace(/\s+/g, '').substr(0, 1),
          d11: row.d11.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d11.replace(/\s+/g, '').substr(0, 1),
          d12: row.d12.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d12.replace(/\s+/g, '').substr(0, 1),
          d13: row.d13.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d13.replace(/\s+/g, '').substr(0, 1),
          d14: row.d14.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d14.replace(/\s+/g, '').substr(0, 1),
          d15: row.d15.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d15.replace(/\s+/g, '').substr(0, 1),
          d16: row.d16.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d16.replace(/\s+/g, '').substr(0, 1),
          d17: row.d17.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d17.replace(/\s+/g, '').substr(0, 1),
          d18: row.d18.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d18.replace(/\s+/g, '').substr(0, 1),
          d19: row.d19.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d19.replace(/\s+/g, '').substr(0, 1),
          d20: row.d20.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d20.replace(/\s+/g, '').substr(0, 1),
          d21: row.d21.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d21.replace(/\s+/g, '').substr(0, 1),
          d22: row.d22.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d22.replace(/\s+/g, '').substr(0, 1),
          d23: row.d23.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d23.replace(/\s+/g, '').substr(0, 1),
          d24: row.d24.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d24.replace(/\s+/g, '').substr(0, 1),
          d25: row.d25.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d25.replace(/\s+/g, '').substr(0, 1),
          d26: row.d26.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d26.replace(/\s+/g, '').substr(0, 1),
          d27: row.d27.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d27.replace(/\s+/g, '').substr(0, 1),
          d28: row.d28.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d28.replace(/\s+/g, '').substr(0, 1),
          d29: row.d29.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d29.replace(/\s+/g, '').substr(0, 1),
          d30: row.d30.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d30.replace(/\s+/g, '').substr(0, 1),
          d31: row.d31.replace(/\s+/g, '').substr(0, 1).length === 0 ? ' ' : row.d31.replace(/\s+/g, '').substr(0, 1)
        }
      }).then(res => {
        // console.log(res)
        this.reload()
      })
    },
    handleDelete (row) {
      // console.log(row.subid)
      request({
        method: 'post',
        url: '/duty/deleteduty',
        params: {
          subid: row.subid,
          randomID: this.$store.state.user.userId
        }
      }).then(res => {
        this.reload()
      })
    },
    downloadDutyTable () {
      request({
        method: 'post',
        url: 'duty/printxslx',
        params: {
          id: this.belong_to_id
        }
      }).then(res => {
        // 用创建‘a’的方式下载附件
        const link = document.createElement('a')
        link.style.display = 'false'
        link.href = baseURL + '/' + res.data.data.url
        console.log(link.href)
        link.click()
      })
    }
  }
}
</script>

<style scoped>
  >>>::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
  }
  >>>::-webkit-scrollbar-track {
    border-radius: 0;
  }
  >>>::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgb(14,16,54);
    transition: all 0.2s;
    border-radius: 0.25rem;
  }
  >>>::-webkit-scrollbar-corner{
    background: rgb(14, 16, 54);
  }
  .tb-edit .el-input {
    display: none
  }
  .tb-edit .current-row .el-input {
    display: block
  }
  .tb-edit .current-row .el-input+span {
    display: none
  }
  .el-table {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 170%;
    max-width: 170%;
    font-size: 14px;
    color: #606266;
  }
  >>>.el-table td, .el-table th.is-leaf {
    border-left: 1px solid rgb(50,52,71);
    border-right: 1px solid rgb(50,52,71);
    border-bottom: 1px solid rgb(50,52,71);
  }
  >>>.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(color: #060920, alpha: 0.4);
    border-right: 1px solid rgb(50,52,71);
    border-left: 1px solid rgb(50,52,71);
    border-bottom: 1px solid rgb(50,52,71);
  }
  .el-table td, .el-table th.is-leaf {
    border: 1px solid rgb(50,52,71);
  }
 .el-table tr .el-table th {
    background-color: rgb(50,52,71);
    border-left: 1px solid rgb(50,52,71);
    border-right: 1px solid rgb(50,52,71);
    border-bottom: 1px solid rgb(50,52,71);
  }
</style>
